<template>
  <!--收藏夹的展示-->
<div id="displayCol">
  <div class="col-tac">
    <el-row >
      <el-col :span="12">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo">
            <el-menu-item index="0" @click="open">
              <i class="el-icon-location"></i>
              <span slot="title" class="col-type">新建收藏夹</span>
            </el-menu-item>

          <router-link to="/infoside/mycollect/details" class="col-type">
            <el-menu-item  index="1">
              <i class="el-icon-menu"></i>
              <span slot="title" >默认收藏夹</span>
            </el-menu-item>
          </router-link>
          <router-link to="/infoside/mycollect/details" class="col-type">
            <el-menu-item  v-for="col in colList" index="3" v-bind:key='col'>
              <i class="el-icon-menu"></i>
              <span slot="title" class="col-type">{{col}}</span>
            </el-menu-item>
          </router-link>
        </el-menu>
      </el-col>
    </el-row>
  </div>
  <div class="mycol-display">
    <router-view/>
  </div>

</div>
</template>

<script>
export default {
  data () {
    return {
      colList: []
    }
  },

  methods: {
    open () {
      this.$prompt('请输入收藏夹名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '创建成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        })
      })
    }
  }
}
</script>

<style>
  #displayCol{
    margin-left: 20px;
  }
  #displayCol .col-tac{
    display: inline;
    float: left;
    width: 300px;
    height: 550px;
  }
  #displayCol .mycol-display{
    display: inline;
    position: absolute;
    top: 5px;
    left: 180px;
    width: 809px;
    height: 540px;
  }
  #displayCol .col-type{
    text-decoration: none;
  }
  #displayCol .divide-page{
    position: absolute;
    bottom: 10px;
    left: 300px;
  }
</style>
